<template>
	<div class="com-footer">
		<div class="fixed-footer">
        <router-link class="list" v-bind:class="footerindex==1 ? 'listact' : ''" to="/">
          <i class="icon iconfont icon-shouye"></i>
          <p>首页</p>
        </router-link>
        <div class="list" v-on:click="listbtn()">
          <div class="list-box" v-show="listact">
            <a href="mqqwpa://im/chat?chat_type=wpa&uin=280964281&version=1&src_type=web&web_src=oicqzone.com" target="_blank"  class="item">
              <p>QQ客服1</p>
              <i class="icon iconfont icon-qq-copy"></i>
            </a>
            <a href="mqqwpa://im/chat?chat_type=wpa&uin=3598795683&version=1&src_type=web&web_src=oicqzone.com" target="_blank"  class="item">
              <p>QQ客服2</p>
              <i class="icon iconfont icon-qq-copy"></i>
            </a>
            <a href="mqqwpa://im/chat?chat_type=wpa&uin=439989060&version=1&src_type=web&web_src=oicqzone.com" target="_blank"  class="item">  
              <p>QQ客服3</p>
              <i class="icon iconfont icon-qq-copy"></i>
            </a>
            <a href="tel:0834-5116789" class="item">
              <p>电话客服</p>
              <i class="icon iconfont icon-dianhua1"></i>
            </a>
          </div>
          <i class="icon iconfont icon-kefu"></i>
          <p>在线客服</p>
        </div>
        <div class="list" v-bind:class="footerindex==3 ? 'listact' : ''" @click="goshopcar()">
          <i class="icon iconfont icon-gouwuche"></i>
          <p>购物车</p>
        </div>
        <div class="list" v-bind:class="footerindex==4 ? 'listact' : ''" @click="person()">
          <i class="icon iconfont icon-wode2"></i>
          <p>我的</p>
        </div>
    </div>
	</div>
</template>
<script>
export default {
	name: 'index',
  	data () {
  		return{
        listact: false
  		}
  	},
    props: {
        footerindex: Number  //定义传值的类型<br>    
    },
  	methods:{
      listbtn:function(){
        this.listact = !this.listact
      },
      person:function(){
        if (this.$store.state.dlzt==1) {
          this.$router.push({ name: 'person' })
        }else{
          this.$messagebox.confirm('还没有登录，现在就去登录','未登录',{confirmButtonText:'去登录',cancelButtonText:'先逛逛'})
              .then(() => {
                this.$router.push({ name: 'login' })
              }).catch(() => {
                        
              });
        }
      },
      goshopcar:function(){
        if (this.$store.state.dlzt==1) {
          this.$router.push({ name: 'shopcar' })
        }else{
          this.$messagebox.confirm('还没有登录，现在就去登录','未登录',{confirmButtonText:'去登录',cancelButtonText:'先逛逛'})
              .then(() => {
                this.$router.push({ name: 'login' })
              }).catch(() => {
                        
              });
        }
      }
  	},
  	components:{
      
  	},
  	mounted(){
      
    },
    created(){
      
    }
}
</script>
<style scoped lang="less">
.com-footer{
  width: 100%;
  height: 1.06rem;
  .fixed-footer{
    width: 100%;
    height: .96rem;
    border-top: .02rem solid #b8b8b8;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999999;
      .list{
        width: 25%;
        height: 100%;
        float: left;
        display: block;
        color: #888888;
        position: relative;
        .list-box{
          width: 120%;
          height: auto;
          zoom: 1;
          overflow: hidden;
          background: #fff;
          position: absolute;
          bottom: .98rem;
          left: -10%;
          box-sizing: border-box;
          border: 1px solid #d6d6d6;
          -webkit-box-shadow: 0 0 10px 5px #ccc;
          box-shadow: 0 0 10px 5px #ccc;
          -webkit-box-sizing: border-box;
          .item{
            display: block;
            padding: 0 .06rem;
            height: .46rem;
            border-bottom: 1px dashed #d1d1d1;
            color: #3fa33a;
            p{
              float: left;
              font-size: .22rem;
              line-height: .46rem;
            }
            i{
              display: block;
              float: right;
              line-height: .46rem;
              font-size: .32rem;
              margin-top: 0;
            }
            &:first-child{
              margin-top: .1rem;
            }
            &:last-child{
              margin-bottom: .1rem;
            }
          }
        }
        i{
          display: block;
          font-size: .38rem;
          margin-top: .1rem;
        }
        p{
          font-size: .26rem;
        }
      }
      .listact{
        color: #3fa33a;
      }
  }
}
</style>